<template>
  <!-- <div class="leftTip" :class="(iframeData || $store.state.backTheme )? 'blackView' : ''">
    <template v-if="blackView">
      <div class="leftTipItem" :class="active == 1 ? 'active' : ''" @click="goPhysicl">
        <img src="@/assets/img/tip/tipsix.png" v-if="active == 1" alt="" /><img v-else src="@/assets/img/BVImg/bvtip13.png" alt="" />城市体检
      </div>
      <div class="leftTipItem" :class="active == 2 ? 'active' : ''" @click="goHome">
        <img src="@/assets/img/tip/tipsev.png" v-if="active == 2" alt="" /><img v-else src="@/assets/img/BVImg/bvtip18.png" alt="" />致因分析
      </div>
      <div class="leftTipItem" :class="active == 3 ? 'active' : ''" @click="active = 3">
        <img src="@/assets/img/tip/tipfif.png" v-if="active == 3" alt="" /><img v-else src="@/assets/img/BVImg/bvtip12.png" alt="" />公交质效
      </div> 
    </template>
    <template v-else>
      <div class="leftTipItem" :class="active == 1 ? 'active' : ''" @click="goPhysicl">
        <img src="@/assets/img/tip/tip4.jpg" v-if="active == 1" alt="" /><img v-else src="@/assets/img/tip/tip1.jpg" alt="" />城市体检
      </div>
      <div class="leftTipItem" :class="active == 2 ? 'active' : ''" @click="goHome">
        <img src="@/assets/img/tip/tip5.jpg" v-if="active == 2" alt="" /><img v-else src="@/assets/img/tip/tip2.jpg" alt="" />致因分析
      </div>
      <div class="leftTipItem" :class="active == 3 ? 'active' : ''" @click="active = 3">
        <img src="@/assets/img/tip/tip6.jpg" v-if="active == 3" alt="" /><img v-else src="@/assets/img/tip/tip3.jpg" alt="" />公交质效
      </div> 
    </template>
  </div> -->
  <div class="leftTip blackView">
    <template v-if="blackView">
      <div class="leftTipItem" :class="active == 2 ? 'active' : ''" @click="goFast">
        <img src="@/assets/img/slices/l3.png" v-if="active == 2" alt="" /><img v-else src="@/assets/img/slices/l4.png" alt="" />OD
      </div>
      <div class="leftTipItem" :class="active == 3 ? 'active' : ''" @click="goTfc">
        <img src="@/assets/img/slices/l5.png" v-if="active == 3" alt="" /><img v-else src="@/assets/img/slices/l6.png" alt="" />热力图
      </div>
      <div class="leftTipItem" :class="active == 1 ? 'active' : ''" @click="goAre">
        <img src="@/assets/img/slices/l1.png" v-if="active == 1" alt="" /><img v-else src="@/assets/img/slices/l2.png" alt="" />路网
      </div>
      <div class="leftTipItem" :class="active == 4 ? 'active' : ''" @click="goCro">
        <img src="@/assets/img/slices/l7.png" v-if="active == 4" alt="" /><img v-else src="@/assets/img/slices/l8.png" alt="" />路口
      </div>
    </template>
    <template v-else>
      <div class="leftTipItem" :class="active == 1 ? 'active' : ''" @click="goAre">
        <img src="@/assets/img/slices/g1.png" v-if="active == 1" alt="" /><img v-else src="@/assets/img/slices/g2.png" alt="" />区域
      </div>
      <div class="leftTipItem" :class="active == 2 ? 'active' : ''" @click="goFast">
        <img src="@/assets/img/slices/g3.png" v-if="active == 2" alt="" /><img v-else src="@/assets/img/slices/g4.png" alt="" />快速路
      </div>
      <div class="leftTipItem" :class="active == 3 ? 'active' : ''" @click="goTfc">
        <img src="@/assets/img/slices/g5.png" v-if="active == 3" alt="" /><img v-else src="@/assets/img/slices/g6.png" alt="" />地面道路
      </div>
      <div class="leftTipItem" :class="active == 4 ? 'active' : ''" @click="goCro">
        <img src="@/assets/img/slices/g7.png" v-if="active == 4" alt="" /><img v-else src="@/assets/img/slices/g8.png" alt="" />路口
      </div> 
    </template>
  </div>
  <!-- <div class="option" :class="(iframeData || $store.state.backTheme )? 'blackView' : ''">
    <div class="tabRoad">
      <el-radio-group v-model="tabIndex" @change="goArea">
        <el-radio-button label="1" >区域</el-radio-button>
        <el-radio-button label="2">快速路</el-radio-button>
        <el-radio-button label="3">路段</el-radio-button>
        <el-radio-button label="4">路口</el-radio-button>
      </el-radio-group>
    </div>
  </div> -->
</template>

<script>
export default {
  name: 'leftTip',
  data(){
    return {
      active: 0,
      blackView: true,
      tabIndex: 0,
      inputValue: '',
      isDis: false,
      iframeData: null
    }
  },
  props: ['act', 'tab'],
  watch: {
    '$store.state.backTheme':{
      deep: true,
      handler(){
        this.blackView = !this.blackView
      }
    },
    '$store.state.iframeData':{
      deep: true,
      handler(){
        this.iframeData = this.$store.state.iframeData
        this.isDis = true
      }
    }
  },
  created(){
    this.iframeData = this.$store.state.iframeData
    this.active = this.act
    if(!this.$store.state.backTheme){
      this.blackView = false
    }
  },
  mounted(){
    if(this.iframeData){
      this.isDis = true
    }
    this.tabIndex = this.tab
  },
  methods:{
    goPhysicl(){
      this.active = 1
      // this.$router.push({name: 'physicl'}, () => {})
    }, 
    goHome(){
      // this.active = 2
      // this.$router.push({name: 'home'}, () => {})
    },
    goTfc(){
      this.active = 3
      this.$router.push({name: 'home'}, () => {})
      // this.$router.push({name: 'home'}, () => {})
    },
    goCro(){
      // this.active = 4
      // this.$router.push({name: 'cross'}, () => {})
      this.active = 4
      this.$router.push({name: 'cross'}, () => {})
    },
    goFast(){
      this.active = 2
      this.$router.push({name: 'od'}, () => {})
      // this.$router.push({name: 'fast'}, () => {})
    },
    goAre(){
      this.active = 1
      this.$router.push({name: 'flow'}, () => {})
    },
    handSelect(){
    },
    goArea(lab){
      switch(lab){
        case '1':
          this.$store.dispatch('toarea')
          this.$router.push({name: 'area'}, () => {})
          break;
        case '2':
          this.$store.dispatch('tofast')
          this.$router.push({name: 'fast'}, () => {})
          break;
        case '3':
          this.$store.dispatch('tohome')
          this.$router.push({name: 'home'}, () => {})
          // this.$store.dispatch('torailway')
          // this.$router.push({name: 'railway'}, () => {})
          break;
        case '4':
          this.$store.dispatch('tocross')
          this.$router.push({name: 'cross'}, () => {})
          break;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.leftTip{
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 100vh;
  z-index: 12;
  display: flex;
  flex-direction: column;
  background: #FFF;
  align-items: center;
  padding-top: 12px;
  box-sizing: border-box;
}

.leftTipItem{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 12px;
  color: #616161;
  width: 50px;
  height: 62px;
  text-align: center;
  cursor: pointer;
}
.leftTipItem img{
  width: 36px;
  height: 36px;
}
.active{
  // background: #1163FF;
  // color: #FFF;
}
.blackView{
  // background: linear-gradient(0deg, rgba(30, 30, 30, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
  background: #292E2F;
  .leftTipItem{
    color: rgba(255, 255, 255, 1);
  }
  .active{
    color: #FFD57E;
  }
}
.option{
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 200px;
  text-align: center;
  background: #FFF;
  & /deep/ .el-radio-button__inner{
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-top: 10px;
    box-shadow: none !important;
    outline: 0;
  }
  & /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inne{
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    box-shadow: -1px 0 0 0 #409eff;
  }
  & /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner{
    background-color: #225df5;
    border-color: #225df5;
    -webkit-box-shadow: -1px 0 0 0 #225df5;
    box-shadow: -1px 0 0 0 #225df5;
  }
}
.blackView{
  // left: 16px;
  left: 0px;
  &  /deep/ .el-radio-button__inner{
    background: #2D2D2D;
    color: #FFDFA8;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-top: 10px;
    box-shadow: none !important;
    outline: 0;
  }
  & /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner{
    background: linear-gradient(224.32deg,#ff9a2f 1.16%,rgba(30,29,27,.0001));
    opacity: .7;
    border-color: #dcdfe6;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
  }
}
</style>